<ng-template [ngIf]="!inner">
  <h3>{{name}}</h3>
  <button *ngIf="!subject" class="btn btn-primary" (click)="observe()" [disabled]="buttonDisabled$ | async">{{buttonText$ | async}}</button>
  <button *ngIf="subject" class="btn btn-primary" (click)="next()">next</button>
  <button *ngIf="subject" class="btn btn-success" (click)="complete()">complete</button>
  <span *ngIf="!highOrder">value: {{(subject$ | async)?.value}}</span>
</ng-template>
<div class="value-monitor" [class.high-order]="highOrder" [class.inner-observable]="inner">
  <ng-template ngFor let-value [ngForOf]="monitor$ | async">
    <span class="time" *ngIf="value?.type === monitorType.TIMER"
          [class.subscribe]="value.status === monitorType.SUBSCRIBE"
          [class.unsubscribe]="value.status === monitorType.UNSUBSCRIBE"
          [class.complete]="value.status === monitorType.COMPLETE"
          [class.error]="value.status === monitorType.ERROR"><i>.</i></span>
    <span class="value" *ngIf="value?.type === monitorType.VALUE">{{noContent ? '' : value.value}}</span>
    <span [ngClass]="['inner', 'level' + value.level]" *ngIf="value?.type === monitorType.INNER">
      <app-observable-monitor [observable]="value.value" [inner]="true"></app-observable-monitor>
    </span>
  </ng-template>
</div>
